<!--
  *@Description : In user setting edit
  *@author 萧红
  *@date 2020-03-25 21:23
  *@LastEditTime 2020-03-25 21:23
  *@LastEdititors
-->
<template>
    <div id="dongTaiDetail">
      <Tittle :title="title"></Tittle>
      <div :style="{height:$inerHeight + 'px'}">
        <cube-scroll ref="scroll" :data="pinLunData" :options="options" @pulling-down="onPullingDown" @pulling-up="onPullingUp">
          <div class="detail-mode" v-if="data.type==='video' || data.type==='image' || data.type==='photograph'">
            <!--摄影的朦胧主题背景图-->
            <div v-if="data.type==='photograph'" class="photograph-img" :style="{backgroundImage:`url(${data.urls[0]})`}">
              <div class="theme">{{`【${data.labels[2]}】`}}</div>
            </div>
            <!--个人信息区域-->
            <Info :info="data.info" :show-under-btn="0" :show-guan-zhu-btn="1">
              <!--摄影动态还好在时间后面显示有几条动态-->
              <template slot="date-append" v-if="data.type==='photograph'">
                共{{data.urls?data.urls.length:0}}张图片
              </template>
            </Info>
            <div>
              <!--文本区域-->
              <div class="detail-text" v-if="data.content.length>0">
                <pre>{{data.content}}</pre>
              </div>
              <!--&ndash;是摄影动态时，摄影师服装相关信息-->
              <div class="photograph-info" v-if="data.type==='photograph'">
                <div>
                  <span class="name">摄影:&ensp;</span>
                  <span>{{data.labels[0]}}</span>
                </div>
                <div>
                  <span class="name">服装:&ensp;</span>
                  <span>{{data.labels[1]}}</span>
                </div>
              </div>
              <!--// 多张摄影图区域-->
              <div class="detail-view" v-if="data.type==='photograph'">
                <img-area :imgFileList="data.urls" :direction="'vertical'"></img-area>
                <!--<img :src="imgItem"  alt="" v-for="(imgItem, mindex) in data.imgs" :key="imgItem" @click="handleImgsClick(data.imgs, mindex)"/>-->
              </div>
              <!--多张图片区域-->
              <div class="detail-view" v-if="data.type==='image'">
                <img-area :imgFileList="data.urls"></img-area>
                <!--<img :src="imgItem"  alt="" v-for="(imgItem, mindex) in data.imgs" :key="imgItem" @click="handleImgsClick(data.imgs, mindex)"/>-->
              </div>
              <!--视频区域-->
              <div class="detail-video" v-if="data.type==='video'">
                <my-video :vedio-url="data.urls[0]" :poster="data.urls[1]"></my-video>
               </div>
            </div>
            <!--标签区域 只有视频动态和图文动态才使用，否则不显示此区域-->
            <div class="detail-label" v-if="data.labels.length>0&& (data.type==='image'||data.type==='video')">
              <div v-for="label in data.labels" :key="label">{{label}}</div>
            </div>
          </div>
          <div class="article" v-if="data.type==='article'">
              <div class="article-title">{{data.labels[0]}}</div>
              <div class="date-name">
                 <div class="date">{{data.info.time}}</div>
                 <div class="name" @click="toNewPage({path:'/userDetail',query:{userId:data.info.user_id}})">{{data.info.name}}</div>
               </div>
              <div class="content">
                <pre>{{data.content}}</pre>
              </div>
              <Info :info="data.info" :show-under-btn="0" :show-guan-zhu-btn="1" class="article-info"></Info>
              <hr color="#f0f0f0" size="0.5"/>
          </div>
          <div class="detail-dianzan-area">
            <template v-if="dnumber>0">
              <div v-for="(item,index) in dianzanData" :key="index" class="detail-item">
                <img :src="item.imgUrl" alt="">
              </div>
            </template>
            <div v-else class="detail-no-dianzan">
              还没有人点赞哦
            </div>
            <div class="detail-zannumber" @click="goDianZanList">
              赞 {{dnumber}}
            </div>
          </div>
          <div class="detail-pinlun-area">
            <div class="detail-pinlun-title">
              <h1>评论&ensp;{{`(${pinlunNumber})`}}</h1>
            </div>
            <!--// 评论数据区域-->
            <div v-for="(pinlunItem,index) in pinLunData" :key="index" v-if="pinLunData.length>0">
              <Info :info="pinlunItem.info" :show-under-btn="0" :show-guan-zhu-btn="0" :key="index" class="border-bottom-1px">
                <div slot="pinlun" class="pinlun-content">
                  {{pinlunItem.content}}
                </div>
              </Info>
            </div>
          </div>
          <div class="end">
            <div v-if="pinlunNumber===0" class="no-pinlun">还没有人评论哦</div>
          </div>
        </cube-scroll>
      </div>
      <add-pinlun :data="data" @addPinlun="addPinlun" @dianzan="dianzan(data)" @shoucang="shouChang(data)"></add-pinlun>
    </div>
</template>

<script>
import Tittle from '../../components/Tittle'
import imgArea from '../../components/imgArea'
import Info from '../../components/Info'
import AddPinlun from '../../components/AddPinlun'
import MyVideo from '../../components/MyVideo'
import {PullDownRefreshAndPullUpLoad} from '../../common/js/mixins'
export default {
  name: 'DongTaiDetail',
  mixins: [PullDownRefreshAndPullUpLoad],
  components: {
    Tittle,
    imgArea,
    Info,
    AddPinlun,
    MyVideo
  },
  mounted () {
    this.data = JSON.parse(this.$route.query.data) // 从路由传送过来的用户数据
    this.init()
    switch (this.data.type) {
      case 'article': this.title = '文章详情'; break
      case 'video': case 'image': this.title = '动态详情'; break
      case 'photograph': this.title = '摄影'; break
    }
    // console.log(this.data)
  },
  methods: {
    init () {
      this.apis.getDianZan({did: this.data.did}).then((res) => {
        // console.log(res.data)
        // 这里只需要前8条点赞数据
        if (res.data.length < 8) {
          this.dianzanData = res.data
        } else {
          this.dianzanData = res.data.splice(0, 8)
        }
        this.dnumber = res.dianzanNumber
      })
      this.apis.getPinLun({did: this.data.did, page: this.page}).then((res) => {
        if (res.code === 200) {
          // console.log(res.data)
          this.pinLunData = res.data
          this.pinlunNumber = res.pinlunNumber
        }
      })
      this.$refs.scroll.refresh()
    },
    dianzan (data) {
      console.log(data)
      let params = {
        userId: localStorage.getItem('userId'),
        did: data.did
      }
      if (data.indianzan === 0) {
        this.apis.addDianZan(params).then(res => {
          if (res.code === 200) {
            this.$toast(res.msg, 'correct')
            this.init()
          } else {
            this.$toast(res.msg, 'error', 1000)
          }
        })
      } else {
        this.apis.cancelDianZan(params).then(res => {
          if (res.code === 200) {
            this.$toast(res.msg, 'correct')
            this.init()
          } else {
            this.$toast(res.msg)
          }
        })
      }
    },
    shouChang (data) {
      let params = {
        userId: localStorage.getItem('userId'),
        did: data.did
      }
      if (data.inshouchang === 0) {
        this.apis.addShouChang(params).then(res => {
          if (res.code === 200) {
            this.$toast(res.msg, 'correct')
            this.getData()
          } else {
            this.$toast(res.msg, 'error', 1000)
          }
        })
        console.log(params)
      } else {
        this.apis.cancelShouChang(params).then(res => {
          if (res.code === 200) {
            this.$toast(res.msg, 'correct')
            this.getData()
          } else {
            this.$toast(res.msg)
          }
        })
      }
    },
    onPullingDown () {
      this.page = 1
      this.init()
    },
    onPullingUp () {
      this.page++
      this.apis.getPinLun({did: this.data.did, page: this.page}).then((res) => {
        if (res.code === 200) {
          // console.log(res.data)
          if (res.data.length === 0) {
            // 如果这页数据为空
            this.page--
            this.$refs.scroll.forceUpdate()
          } else {
            this.pinLunData = this.pinLunData.concat(res.data)
            this.pinlunNumber = res.pinlunNumber
          }
        }
      })
    },
    addPinlun (content) {
      if (content === '') {
        this.$toast('说点什么吧')
      }
      let parmas = {
        'did': this.data.did,
        'uid': localStorage.getItem('userId'),
        'content': content
      }
      this.$toast('评论中(*^▽^*)', 'loading', 5000)
      this.apis.setPinLun(parmas).then((res) => {
        if (res.code === 200) {
          this.$toast('评论成功', 'correct', 1000)
          let time = setTimeout(() => {
            this.$toast('获取数据中', 'loading')
            this.init()
            clearTimeout(time)
          }, 1000)
        } else {
          this.$toast(res.msg, 'error', 1000)
        }
      })
    },
    // 获得点赞列表
    goDianZanList () {
      this.$router.push({path: '/dianzanlist', query: {did: this.data.did}})
    }
  },
  data () {
    return {
      title: '动态详情', // 标题栏显示的文字
      data: { // data是用户数据
        info: {},
        content: '',
        imgs: [],
        labels: ['美少女'],
        type: 'image'
      },
      dnumber: 0,
      pinlunNumber: 0,
      shoucang: 0,
      isShowAddDongTai: false, // 是否显示发布动态界面
      dianzanData: [], // 点赞数据,
      pinLunData: [] // 评论数据
    }
  }
}
</script>

<style scoped lang="stylus">
@import "../../../node_modules/stylus-px2rem"
  #dongTaiDetail
  {
    .detail-mode
    {
      padding 5px 0px;
      box-sizing border-box
      border-bottom 1px solid #f0f0f0
      .photograph-img
      {
        width 100%
        height 50px
        line-height 50px
        margin-top:-5px
        position relative
        background-position center
        background-size cover
        background-repeat no-repeat
        .theme
        {
          width 100%;
          height 50px;
          position absolute
          color snow
          font-weight bolder
          font-size:8px
          letter-spacing 2px
          z-index 1
        }
      }
      .photograph-img:after{
        content: "";
        width:100%;
        height:100%;
        position: absolute;
        left:0;
        top:0;
        background: inherit;
        filter: blur(3px);
        z-index: 0;
      }
      .detail-info
      {
        padding 5px 2px
      }
      .detail-text
      {
        text-align left;
        padding 3px;
        pre
        {
          width 100%
          font-family 'Avenir', Helvetica, Arial, sans-serif
          line-height 8px
          display inline-block
          text-align left
        }
      }
      .photograph-info
      {
        width 100%
        background-color #f0f0f0
        padding 3px 5px
        &>div
        {
          width 100%
          height 9px
          line-height 9px
          text-align left
          span.name
          {
            color:#999
          }
        }
      }
      .detail-label
      {
        display flex
        flex-direction row
        justify-content flex-start
        div
        {
          display inline
          margin 2px
          padding 0px 2px
          height 10px;
          line-height 10px;
          background #fff1f1;
          color:deeppink;
        }
      }
    }
    .article
    {
      width 100%
      text-align left
      .article-title
      {
        width 100%
        height: 10px
        line-height 10px
        font-size 8px
        font-weight bolder
        letter-spacing 2px
        color black
        padding 3px
      }
      .date-name
      {
        width 100%
        height: 10px
        line-height 10px
        padding 3px 3px 0px 3px
        display flex
        .date
        {
          color:#999
          margin-right: 5px
        }
        .name
        {
          letter-spacing 2px
          font-weight bolder
          color: #25a2eb
        }
      }
      .content
      {
        padding 0px 3px
        margin 3px 0px
        pre
        {
          width: 100%;
          font-family: 'Avenir', Helvetica, Arial, sans-serif;
          line-height: 0.5rem;
          display: inline-block;
          text-align: left;
        }
      }
      .article-info
      {
        text-align center
        background-color #f0f0f0
      }
    }
    .detail-dianzan-area
    {
      width 100%
      display flex
      flex-flow row nowrap
      justify-content flex-start
      align-items center
      height: 25px
      line-height: 25px
      overflow hidden
      position: relative
      border-bottom 3px solid #f0f0f0
      padding-left:2px

      .detail-item
      {
        width: 14px
        height: 14px
        margin 0px 1.1px
        img
        {
          width 100%
          height: 100%
          border-radius 50%
        }
      }
      .detail-no-dianzan
      {
        width 100%
        color #999
        text-align center
      }
      .detail-zannumber
      {
       position absolute
       right 5px
       width 25px;
       line-height 12px;
       background-color #f0f0f0;
       border-radius 2px;
      }
    }
    .detail-pinlun-area
    {
      .detail-pinlun-title
      {
        width: 100%
        height: 15px
        line-height 15px
        padding 2px
        text-align left
        border-bottom 1px solid #f0f0f0
      }
    }
    .end
    {
      line-height 25px
      font-size: 6px
      color #999
      background-color #f0f0f0
      border-bottom 1px solid #f0f0f0
      .no-pinlun
      {
        height 60px
        line-height 25px
        border-bottom 1px solid #f0f0f0
      }
    }
  }
</style>
